<template>
<el-dialog title="节点人员设置" append-to-body  width="1000px"  v-model="visible" draggable>
    <el-button type="primary" style="margin-bottom:5px"  @click="add">添加</el-button>
    <el-table
      :data="tableData"
      border
      height="500px"
      size="small"
      >
    <el-table-column
        prop="type"
        label="用户类型"
        >
        <template #default="scope">
          <el-select  v-model="scope.row.type" @change="clear(scope.row)" placeholder="请选择">
              <!-- <el-option v-for="(label, value) in auditUsers" :key="value" :label="label" :value="value"> </el-option> -->
              <el-option label="用户" value="user"> </el-option>
              <el-option label="岗位" value="post"> </el-option>
              <el-option label="公司" value="company"> </el-option>
              <el-option label="部门" value="depart"> </el-option>
              <el-option label="角色" value="role"> </el-option>
              <el-option label="发起人" value="applyUserId"> </el-option>
              <el-option label="上一步执行人" value="previousExecutor"> </el-option>
               <el-option label="当前登录用户" value="currentUserId"> </el-option>
              <el-option label="sql脚本" value="sql"> </el-option>
              <el-option label="自定义条件" value="custom"> </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="value"
        label="用户来自">
        <template #default="scope">
            <user-select  v-model="scope.row.value" v-if="scope.row.type === 'user'"></user-select>
            <role-select v-model="scope.row.value"  v-else-if="scope.row.type === 'role'"></role-select>
            <post-select v-model="scope.row.value"  v-else-if="scope.row.type === 'post'"></post-select>
            <office-select  v-else-if="scope.row.type === 'company'"  v-model="scope.row.value" type="1"/>
            <office-select  v-else-if="scope.row.type === 'depart'"  v-model="scope.row.value" type="2"/>
          <label  v-else-if="scope.row.type === 'applyUserId'">发起人 </label>
          <label  v-else-if="scope.row.type === 'previousExecutor'">上一步执行人 </label>
          <label  v-else-if="scope.row.type === 'currentUserId'">当前登录用户 </label>
          <!-- <label  v-if="scope.row.type === 'java'"> 人员脚本</label> -->
          <el-input type="textarea" v-model="scope.row.value" v-else-if="scope.row.type === 'sql'" placeholder="请输入自定义sql获取审核人员信息"></el-input>
           <el-input type="textarea" v-model="scope.row.value" v-else-if="scope.row.type === 'custom'" placeholder="请输入自定义扩展标记值，你可以根据该标记，在Java中解析你需要的审核人员信息"></el-input>
           <label  v-else>{{showUserTypeLabel(scope.row.type)}} </label>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序">
        <template #default="scope">
           <el-input  type="number" @change="sort"  controls-position="right"  :min="0"  v-model="scope.row.sort"></el-input>
        </template>
      </el-table-column>
       <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="100"
        label="操作">
        <template #default="scope">
          <el-button type="danger" size="small" text  @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  <template #footer>
      <span class="dialog-footer">
          <el-button  @click="visible = false" icon="circle-close">关闭</el-button>
          <el-button  type="primary"  @click="doSubmit()" icon="circle-check" v-noMoreClick>确定</el-button>
      </span>
  </template>
</el-dialog>
</template>

  <script>
    import PostSelect from '@/components/postSelect' //jeeplus
    import RoleSelect from '@/components/roleSelect' //jeeplus
    import UserSelect from '@/components/userSelect' //jeeplus
    import OfficeSelect from '@/components/officeSelect'
    import  {getUserTypeLabel} from './UserUtils'
export default {
      components: {
        PostSelect,
        RoleSelect,
        UserSelect,
        OfficeSelect
      },
      data () {
        return {
          visible: false,
          oldRow: null,
          form: {
            type: 'user',
            value: '发起人',
            condition: '',
            operationType: 'and',
            sort: 0
          },
          tableData: []
        }
      },
      methods: {
        add () {
          this.oldRow = null
          let sort = this.tableData.length * 10
          this.tableData.push({
            type: '',
            value: '',
            condition: '0',
            operationType: '0',
            sort: sort
          })
        },
        showUserTypeLabel (value) {
          return getUserTypeLabel (value)
        }, 
        sortTableData () {
            return this.sortByKey(this.tableData,'sort')
        },
        sort () {
          let tableData = this.sortTableData ();
          this.tableData = JSON.parse(JSON.stringify(tableData))
        },
        clear (row) {
          row.value = ''
        },
            //数组对象排序
        sortByKey (array,key) {
            return array.sort(function(a,b){
                var x = parseInt(a[key]);
                var y = parseInt(b[key]);
                return((x<y)?-1:((x>y)?1:0));
            })
        },
        init (tableDataStr) {
          this.tableData = JSON.parse(tableDataStr)
          this.visible = true
        },
        del (row) {
          this.tableData.forEach((item, index) => {
            if (item === row) {
              this.tableData.splice(index, 1)
            }
          })
        },
        doSubmit () {
          let datas = this.tableData.filter((item)=>{
            return item.type && item.value || item.type === 'applyUserId' || item.type === 'previousExecutor' || item.type === 'currentUserId'
          })
          this.$emit('selectUsers', JSON.stringify(datas))
          this.visible = false
        },
      }
}
  </script>